<template>
    <h1>全球媒体榜</h1>
    <div id="line"></div>
    <li class="el-icon-arrow-left" @click="sub"></li>
    <li class="el-icon-arrow-right" @click="add"></li>
        <span>
            <div id="songsheet" v-for="item in sheetarr">
                <router-link :to="{path:'/yunyin/sheet',query:{sheetid:item.id}}">
                  <img id="sheetimg" :src="item.coverImgUrl" alt="">
                     <h2>{{item.name}}</h2>
                    <div class="updata">{{item.updateFrequency}}</div>
                </router-link>
        </div>
            <router-view></router-view>
        </span>
</template>

<script>
import axios from 'axios'
import redline from '../redline.vue';
export default {
  components: { redline },
    name:'morelist',
    data(){
        return{
            sheetarr:'',
            num:'',
        }
    },
    watch:{
        num(m,n){
            let that=this;
            axios.get("http://39.101.203.189:3000/toplist/detail").then(function(response) {
                             let arr = new Array(4);
                        for (let i = m; i < m+4; i++) {
                            arr[i-m] = response.data.list[i];
                        }
                        // console.log(arr);
                        that.sheetarr = arr;
                    }, function(err) {})
        }
    },
    mounted:function(){
        this.loading();
    },
    methods:{
         loading: function() {
                     this.num=11;
                        
                },
                add(){
                    if(this.num<31){
                        this.num=this.num+4;
                    }
                    else{
                            this.$message({
                        message: '已经没有内容了哦',
                        type: 'warning'
                    });
                    }
                },
                sub(){
                    if(this.num>7){
                        this.num=this.num-4;
                    }
                    else{
                        this.$message({
                        message: '已经没有内容了哦',
                        type: 'warning'
                    });
                    }
                }
    }

}
</script>

<style scoped>
h1{
    position: relative;
    left: 50px;
    font-size: 25px;
    color:aliceblue;
}
#line{
    position: relative;
    left: 50px;
    margin-bottom: 20px;
    width: 810px;
    height: 3px;
    background-color: #4b040d;
}
h2{
    position: relative;
    top:-18px;
    font-size:18px;
}
.updata{
    position: relative;
    top:-30px;
    opacity: 0.6;
    font-size: 14px;

}
#songsheet {
     position: relative;
     left: -40px;
     top: -5px;
     width: 150px;
     height: 174px;
     margin-right: 70px;
     background-color: #2e2526;
     color: #fff;
     text-align: left;
     display: inline-block;
     vertical-align: top;
     text-align: center;
     user-select:none;
 }
 
 #sheetimg {
     position: relative;
     width: 100%;
     height: 72%;
 }
 a{
     color: aliceblue;
     text-decoration: none;
 }
 .el-icon-arrow-left,.el-icon-arrow-right{
     position: relative;
     top:-65px;
     left: 200px;
     color: #fff;
     font-size: 25px;
     margin-right: 20px;
 }
</style>